<template>
  <view>
    <Header></Header>
    <view class="flex flex-col flex-center">
      <view class="title" v-if="list.length != 0">{{ type == 1 ? list[0].infobook.name : title }}
      </view>
      <view class="card">
        <view class="flex-js" style="width: 100%">
          <view></view>
          <view class="pr5">{{ selectActive + 1 }}/{{ list.length }}</view>
        </view>
        <view class="flex">
          <view style="width: 600rpx"></view>
          <view class="flex">
            <view>知识掌握:</view>
            <view style="margin-left: 260rpx">思路情况</view>
          </view>
        </view>
        <view v-for="(item, index) in list" :key="index">
          <view v-if="selectActive === index">
            <view class="flex flex-js mt2 mb2">
              <view class="f30 fw mr2" style="width: 600rpx"> {{ item.name }}</view>
              <radio-group @change="(e) => radioChange(e, index, '1')">
                <radio value="1" :checked="item.checkedZhishi == '1'" /> 对
                <radio value="2" :checked="item.checkedZhishi == '2'" /> 半对
                <radio value="3" :checked="item.checkedZhishi == '3'" />错
              </radio-group>
              <radio-group class="ml4" @change="(e) => radioChange(e, index, '2')">
                <radio value="1" :checked="item.checkedSilu == '1'"
                  :disabled="item.checkedZhishi === '3' || item.checkedZhishi === '2'" /> 对
                <radio value="2" :checked="item.checkedSilu == '2'" :disabled="item.checkedZhishi === '3'" /> 半对
                <radio value="3" :checked="item.checkedSilu == '3'" />错
              </radio-group>
            </view>
            <view v-for="(i, idx) in item.children" v-show="item.checkedZhishi == '2' || item.checkedSilu == '2'">
              <view class="flex flex-js mt2 mb2">
                <view style="width: 600rpx">{{ i.name }} </view>
                <radio-group @change="(e) => radioChange1(e, index, idx, '1')">
                  <radio value="1" :disabled="item.checkedSilu === '2' && item.checkedZhishi != '2'"
                    :checked="i.checkedZhishi == '1'" /> 对
                  <radio value="2" :disabled="item.checkedSilu === '2' && item.checkedZhishi != '2'"
                    :checked="i.checkedZhishi == '2'" /> 半对
                  <radio value="3" :disabled="item.checkedSilu === '2' && item.checkedZhishi != '2'"
                    :checked="i.checkedZhishi == '3'" />错
                </radio-group>
                <radio-group class="ml4" @change="(e) => radioChange1(e, index, idx, '2')">
                  <radio value="1" :checked="i.checkedSilu == '1'" /> 对
                  <radio value="2" :checked="i.checkedSilu == '2'" /> 半对
                  <radio value="3" :checked="i.checkedSilu == '3'" />错
                </radio-group>
              </view>
            </view>
          </view>
        </view>
        <view class="btns" v-if="list.length > 0">
          <view class="btn" @click="submit">提交</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { chapter, module, addall } from '/api'

const { proxy } = getCurrentInstance()

const student_id = ref()
const moduleclass_id = ref()
const type = ref()
const list = ref([])
const selectActive = ref(0)
const title = ref()

onLoad(async (options) => {
  student_id.value = options.student_id
  moduleclass_id.value = options.moduleclass_id
  type.value = options.type
  title.value = options.title
  init()
})

async function init() {
  const params = {
    student_id: student_id.value
  }
  type.value == 1 ? (params.book_id = moduleclass_id.value) : (params.moduleclass_id = moduleclass_id.value)
  const {
    data: { data }
  } = type.value == 1 ? await chapter(params) : await module(params)
  list.value = data
}

function radioChange(e, index, type) {
  const selectType = type == '1' ? 'checkedZhishi' : 'checkedSilu'
  list.value[index][selectType] = e.detail.value
  list.value[index].children.forEach((i) => {
    if (e.detail.value != '2') {
      i[selectType] = e.detail.value
    } else {
      i[selectType] = ''
    }
  })

  if (type == '1' && e.detail.value == '3') {
    list.value[index].checkedSilu = '3'
    list.value[index].children.forEach((i) => {
      i.checkedSilu = '3'
    })
  }
  proxy.$forceUpdate()
}

function radioChange1(e, index, idx, type) {
  const selectType = type == '1' ? 'checkedZhishi' : 'checkedSilu'
  list.value[index].children[idx][selectType] = e.detail.value
  proxy.$forceUpdate()
}

async function submit() {
  let msg = ''
  if (!list.value[selectActive.value].checkedZhishi) msg = '您还未进行测评，请先进行测评'
  if (
    (list.value[selectActive.value].checkedZhishi == '2' && list.value[selectActive.value].children.some((item) => !item.checkedZhishi)) ||
    (list.value[selectActive.value].checkedSilu == '2' && list.value[selectActive.value].children.some((item) => !item.checkedSilu))
  )
    msg = '您还未进行测评，请先进行测评'
  if (msg != '')
    return uni.showToast({
      title: msg,
      duration: 2000,
      icon: 'none'
    })

  const recType = type.value == '1' ? 'chapter_id' : 'module_id'
  if (selectActive.value + 1 === list.value.length) {
    const params = {
      student_id: student_id.value,
      rec: list.value
        .flatMap((item) => [
          {
            [recType]: item[recType],
            zhishi: item.checkedZhishi,
            silu: item.checkedSilu
          },
          ...item.children.map((child) => ({
            [recType]: child[recType],
            zhishi: child.checkedZhishi,
            silu: child.checkedSilu
          }))
        ])
        .flat(1)
    }
    type.value == 1 ? (params.book_id = moduleclass_id.value) : (params.moduleclass_id = moduleclass_id.value)
    const { status } = await addall(params)
    if (status === 200) {
      uni.reLaunch({
        url: `/pages/evaluating/result?student_id=${student_id.value}&moduleclass_id=${moduleclass_id.value}&type=${type.value}&title=${type.value == 1 ? list.value[0].infobook.name : list.value[0].setsubject.name}`
      })
    }
    return
  }
  selectActive.value += 1
}
</script>

<style lang="scss" scoped>
.title {
  margin-top: 60rpx;
  font-weight: bold;
  font-size: 36rpx;
  margin-bottom: 30rpx;
}

.list {
  padding: 30rpx;
  box-sizing: border-box;

  .item {
    margin-bottom: 30rpx;

    .tag {
      padding: 6rpx 20rpx;
      width: 120rpx;
      height: 46rpx;
      box-sizing: border-box;
      background-color: rgba(54, 194, 170, 0.5);
      color: #333;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &-btns {
      margin-top: 30rpx;

      &-i {
        width: 120rpx;
        height: 50rpx;
        border: 2rpx solid #797979;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
      }

      &-active {
        border: 2rpx solid #377CB7;
        background-color: #377CB7;
        color: #fff;
      }
    }
  }
}

.btns {
  display: flex;
  margin-top: 100rpx;
  padding-bottom: 200rpx;

  .btn {
    width: 200rpx;
    height: 80rpx;
    border-radius: 10rpx;
    background-color: #377CB7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.card {
  width: 1900rpx;
  position: absolute;
  height: 900rpx;
  overflow-y: auto;
  top: 350rpx;
  left: 50%;
  transform: translate(-50%, 0%);
  box-shadow:
    5px 5px 5px rgba(0, 0, 0, 0.1),
    5px -5px 5px rgba(0, 0, 0, 0.1),
    -5px 5px 5px rgba(0, 0, 0, 0.1),
    -5px -5px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100rpx;
  box-sizing: border-box;
}
</style>
